<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="layouts/base :: head(~{::title})">
        <title>Login</title>
    </head>
    
    <body>
        <div class="login-container">
            <div class="login-box">
                <h1 class="login-title is-size-3 has-text-weight-bold">用户登录</h1>
                <form th:action="@{/login}" method="post" class="centered-form">
                    <div class="field">
                        <label class="label" for="username">用户名</label>
                        <div class="control has-text-centered">
                            <input class="input is-inline" type="text" id="username" name="username" placeholder="请输入用户名" required style="max-width: 300px;">
                        </div>
                    </div>
                    
                    <div class="field">
                        <label class="label" for="password">密码</label>
                        <div class="control has-text-centered">
                            <input class="input is-inline" type="password" id="password" name="password" placeholder="请输入密码" required style="max-width: 300px;">
                        </div>
                    </div>
                    
                    <div class="field">
                        <div class="control has-text-centered">
                            <button class="button is-primary is-medium" type="submit" style="max-width: 300px;">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <style>
            .login-container {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                padding: 1rem;
                background-color: #f5f5f5;
            }
            
            .login-box {
                width: 100%;
                max-width: 400px;
                padding: 2rem;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                background: white;
            }
            
            .login-title {
                text-align: center;
                margin-bottom: 2rem;
                color: #333;
            }
            
            .field {
                margin-bottom: 1.5rem;
            }
            
            .label {
                display: block;
                margin-bottom: 0.5rem;
                font-weight: 600;
                color: #333;
            }
            
            .centered-form {
                text-align: center;
            }
            
            .has-text-centered {
                text-align: center;
            }
            
            .is-inline {
                display: inline-block;
            }
        </style>
    </body>
</html>